<template>
	<!--index.wxml-->
	<view class="index_block">
		<view class="swiper_block">
			<view class="top_icon">
				<view class="icon_search" @click="goSearch"></view>
			</view>
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				indicator-color="#fff" indicator-active-color="#4EDDF9" :circular="circular" class="swiper-con">
				<swiper-item v-for="(item,index) in swiperArr" :key="item.photoUrl">
					<image :src="item.photoUrl"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="icon_list">
			<view>
				<text class="iconfont icon-xiuxiankafeiyule"></text>
				<text>省心</text>
			</view>
			<view>
				<text class="iconfont icon-zuanshi"></text>
				<text>品质</text>
			</view>
			<view>
				<text class="iconfont icon-mimayaochi"></text>
				<text>私密</text>
			</view>
			<view>
				<text class="iconfont icon-huiyuanzhuanxiang"></text>
				<text>专享</text>
			</view>
		</view>
		<view class="content_block">
			<view class="tuijian">
				<text>推荐</text>
				<text class="iconfont icon-xia"></text>
			</view>
			<view class="list_block">
				<view v-for="(item,index) in tuijianArr" :key="index" class="list" @click="goItem"
					:data-id=item.productId>
					<view style="position: relative;">
						<image class="list-img" :src="item.proPicUrl"></image>
						<view style="position: absolute;left: 90px;top:50px;color: #fff;font-size: 12px;">
							<text class="iconfont icon-shoucang2" style="font-size: 14px;"></text>
							<text>{{ item.collectionNum }}</text>
						</view>
					</view>
					<view class="list_right">
						<view class="list_proTitle">
							<text>{{ item.proTitle }}</text>
						</view>
						<view class="list_country">
							<text class="iconfont icon-didian"></text>
							<text>{{ item.country }}</text>
						</view>
						<view class="item_price">
							<view>
								<text class="iconfont icon-shijian"></text>
								<text class="guess_date">{{ item.routingDat }}天{{ item.routingNigth }}晚</text>
							</view>
							<view>
								<text class="iconfont icon-jiaqian"></text>
								<text class="guess_price">{{ item.amount }}元起</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="activity_block">
			<view class="activity_title">
				<view class="title">
					<text>招募活动</text>
				</view>
				<text class="desc">旅途中，邂逅TA，邂逅世界的美</text>
				<view class="activity_pagination">
					<text style="font-size:26px">{{activityCurrent + 1}}</text>
					<text> / {{activityData.length}}</text>
				</view>
			</view>
			<swiper previous-margin="40rpx" next-margin="40rpx" snap-to-edge="true" :interval="interval"
				:autoplay="autoplay" :current="activityCurrent" :duration="duration" :circular="circular"
				@change="currentChange" class="activity_swiper">
				<swiper-item v-for="(item,index) in activityData" :key="item.pro_pic_url" item-id="item.pro_pic_url">
					<view class="item">
						<view class="image">
							<image :src="item.pro_pic_url"></image>
						</view>
						<view class="border-bottom" :style="{display: activityCurrent === index ? 'block': 'none'}">
							<view class="text_desc">
								<text class="title">{{item.pro_title}}</text>
								<view class="list_country">
									<text class="iconfont icon-didian"></text>
									<text>{{ item.country }}</text>
								</view>
								<view class="zhaomu">
									<text>{{item.out_time}}</text>
								</view>
							</view>
							<view class="content">
								<view class="day">
									<text class="iconfont icon-shijian"></text>
									<text> {{item.routing_data}}天{{item.routing_nigth}}晚</text>
								</view>
								<view class="money">
									<text class="iconfont icon-jiaqian"></text>
									<text> {{item.amount}}元</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="activity_bottom">
				<view v-for="(item,index) in activityDesc" :key="item" class="desc">
					<text class="iconfont icon-shenqingchenggonggougouicon"></text>
					<text>{{item}}</text>
				</view>
			</view>
		</view>
		<view class="guess_block">
			<view class="tuijian">
				<text>猜你喜欢</text>
				<text class="iconfont icon-xia"></text>
			</view>
			<view class="guess_list">
				<view class="guessList" v-for="(item,index) in guessListArr" :key="item.productId">
					<view>
						<image class="guess_img" :src="item.proPicUrl"></image>
					</view>
					<view class="proTitle_block">
						<text class="guess_proTitle">{{ item.proTitle }}</text>
					</view>
					<view class="country_block">
						<text class="iconfont icon-didian"></text>
						<text class="guess_country">{{ item.country }}</text>
					</view>
					<view class="msg_block">
						<view>
							<text class="iconfont icon-shijian"></text>
							<text class="guess_date">{{ item.routingDat }}天{{ item.routingNigth }}晚</text>
						</view>
						<view>
							<text class="iconfont icon-jiaqian"></text>
							<text class="guess_price">{{ item.amount }}元起</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入封装好的http
	import http from "@/utils/http.js";

	export default {
		data() {
			return {
				indicatorDots: true, //轮播是否有小圆点
				vertical: false, //false 横向   true 纵向
				autoplay: true, //自动播放
				interval: 2000, //动画时间
				duration: 500, //间隔时间
				circular: true, //衔接动画
				background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
				tuijianArr: [],
				swiperArr: [],
				guessListArr: [],
				activityData: [],
				activityDesc: ['不用懂外语', '不用懂攻略', '没有购物坑', '不用折腾自己'],
				activityCurrent: 0
			}
		},
		onLoad: function(option) {
			http.request("product/banner/getBySeller/4bc4027c645343f09a964b5c2e9f875b", "", "get").then(res => {
				this.swiperArr = res.data
			});
			// 推荐列表
			http.request("product/product/getProductRecommendUser", {
				desc: false,
				orderBy: "top",
				pageNow: 1,
				pageSize: 20,
				seller_user_id: "4bc4027c645343f09a964b5c2e9f875b",
			}, "post").then(res => {
				this.tuijianArr = res.data
			})
			// 猜你喜欢
			http.request("product/product/guessYouLike", "", "get").then(res => {
				this.guessListArr = res.data
			})
			// 招募活动轮播图
			http.request("requirement/request/getMatchedProducts", {
				desc: false,
				orderBy: "outtime",
				pageSize: 100,
				product_type: 2,
			}, "post").then(res => {
				this.activityData = res.data.matchedProducts
			})
		},
		methods: {
			// 跳转到搜索页
			goSearch() {
				uni.switchTab({
					url: '/pages/search/index',
				})
			},
			// 跳转内容页，传参
			goItem(ev) {
				console.log(ev);
				const id = ev.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/item/item?id=' + id,
				})
			},
			currentChange(e) {
				this.activityCurrent = e.detail.current; 
			}
		}
	}
</script>

<style>
	.top_icon {
		position: fixed;
		top: 40rpx;
		left: 20rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: #F1EFE8;
		border-radius: 50%;
		z-index: 1;
	}

	.icon_search {
		background-position: -131.25rpx -325.125rpx;
		display: inline-block;
		background-image: url("http://www.51houniao.com/wx/customer/classic/images/icon_list.png");
		background-repeat: no-repeat;
		width: 65.625rpx;
		height: 65.625rpx;
		background-size: 548.4375rpx;
		vertical-align: middle;
	}

	.swiper-con {
		width: 750rpx;
		height: 372rpx;
	}

	.swiper-con image {
		width: 750rpx;
		height: 372rpx;
	}

	.index_block {
		width: 100%;
		height: 100%;
		background-color: #F2F2F2;
		overflow: hidden;
	}

	.icon_list {
		width: 750rpx;
		height: 160rpx;
		background-color: #fff;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.icon_list .iconfont {
		color: #ead1af;
		font-size: 30px;
	}

	.icon_list view {
		display: flex;
		flex-direction: column;
	}

	.icon_list text {
		font-size: 12px;
		color: #ead1af;
	}

	.content_block {
		width: 100%;
		box-sizing: border-box;
	}

	.list_block {
		width: 100%;
		padding: 10px 15px;
		box-sizing: border-box;
		background-color: #fff;
	}

	.tuijian {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		height: 100rpx;
		border-bottom: 1px solid #D4D4D4;
		background-color: #fff;
	}

	.tuijian text,
	.tuijian icon-xia {
		font-size: 16px;
		color: #858585;
		margin-right: 3px;
		font-family: "Microsoft Yahei", Tahoma, Arial, sans-serif;
	}

	.list {
		margin-bottom: 10px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px dashed #b9b9b9;
	}

	.list view:nth-child(1) {
		margin-right: 10px;
	}

	.list_right {
		flex: 1;
	}

	.list_right view {
		margin-bottom: 16rpx;
	}

	.list-img {
		width: 120px;
		height: 70px;
	}

	.list_proTitle text {
		font-size: 14px;
	}

	.list_country text,
	.list_country .iconfont {
		font-size: 12px;
	}

	.item_price {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: -6rpx;
	}

	.item_price text {
		font-size: 12px;
		color: #858585;
	}

	.guess_block {
		width: 750rpx;
		background-color: #fff;
	}

	.guess_list {
		width: 750rpx;
		display: flex;
		flex-flow: row wrap;
		padding: 20rpx 20rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.guessList {
		width: 320rpx;
		height: 320rpx;
		border: 1px solid #f2f2f2;
		margin-right: 50rpx;
		margin-bottom: 40rpx;
		background-color: #fff;
		box-shadow: 10rpx 10rpx 0 #f2f2f2;
	}

	.guessList:nth-of-type(even) {
		margin-right: 0;
	}

	.guess_img {
		width: 260rpx;
		height: 140rpx;
	}

	.proTitle_block {
		text-align: right;
	}

	.guess_proTitle {
		font-size: 12px;
	}

	.country_block,
	.list_country {
		margin-left: 4rpx;
		width: max-content;
		background: #e9e9e9;
		border-radius: 4rpx;
		margin-top: 12rpx;
		padding: 4rpx 20rpx 4rpx 0;
		line-height: 1;
		color: #484848;
	}

	.country_block text,
	.country_block .iconfont {
		font-size: 12px;
	}

	.msg_block {
		display: flex;
		padding-left: 14rpx;
	}

	.msg_block text {
		font-size: 12px;
		color: #858585;
		margin-right: 4rpx;
	}

	.msg_block .iconfont,
	.item_price .iconfont {
		font-size: 12px;
		color: #858585;
	}

	.activity_block {
		height: 840rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-top: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.activity_title {
		position: relative;
		padding-left: 60rpx;
	}

	.activity_title .title {
		font-size: 26px;
	}

	.activity_title .desc {
		font-size: 14px;
		color: #858585;
	}

	.activity_title .activity_pagination {
		position: absolute;
		right: 60rpx;
		top: 0;
	}

	.activity_swiper {
		margin: 20rpx 20rpx 0;
		flex: 1;
	}

	.activity_swiper .item {
		padding: 0 10rpx;
	}

	.activity_swiper .image {
		height: 354rpx;
	}

	.activity_swiper .image image {
		height: 100%;
		width: 100%;
	}

	.activity_swiper .text_desc {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		position: relative;
	}

	.activity_swiper .text_desc .title {
		font-size: 12px;
		margin-top: 10rpx;
	}

	.activity_swiper .text_desc .zhaomu {
		position: absolute;
		right: 0;
		background-image: url('http://www.51houniao.com/wx/customer/classic/images/zhaomu.png?v=78f89dc');
		background-repeat: no-repeat;
		background-size: 100%;
		width: 168rpx;
		height: 64rpx;
		font-size: 12px;
		line-height: 64rpx;
		text-align: center;
		color: #33b3b4;
		transform: rotate(-15deg);
	}

	.activity_swiper .content {
		font-size: 12px;
		color: #858585;
		margin-bottom: 32rpx;
	}

	.activity_swiper .content .day,
	.activity_swiper .content .money {
		display: inline-block;
	}

	.activity_swiper .content .day {
		margin-right: 40rpx;
	}

	.border-bottom {
		border-bottom: 1px solid #858585;
	}

	.activity_bottom {
		background-color: transparent;
		display: flex;
		padding: 66rpx 0 76rpx;
		justify-content: center;
		align-items: center;
	}

	.activity_bottom .desc {
		margin-right: 20rpx;
		font-size: 12px;
		color: #858585;
	}

	.activity_bottom .desc:last-child {
		margin-right: 0rpx;
	}
</style>
